<template>
	<div>
		<view class="top-head">
			<view class="banner"
				v-if="tab_list.length > 0 && tab_list[tab_index].banner && tab_list[tab_index].banner.length > 0">
				<swiper autoplay circular>
					<block v-for="(item, index) in tab_list[tab_index].banner">
						<swiper-item>
							<block v-if="item.mime.split('/')[0] === 'video'">
								<video class="img" :src="getImageURL(item.url)"
									:poster="getImageURL(item.cover)"></video>
							</block>
							<block v-else>
								<image class="img" :src="getImageURL(item.url)" @error="onBannerError(index)" />
							</block>
						</swiper-item>
					</block>
				</swiper>
			</view>

			<view class="tab-head">
				<block v-for="(item, index) in tab_list" :key="index">
					<view class="tab-item" :class="{ active: item.infoClassifyId === classifyID }" @click="onTab(item, index)">
						{{ item.title }}

						<view class="line" v-if="item.infoClassifyId === classifyID"></view>
					</view>
				</block>
			</view>
		</view>
		<view class="wrap-list">
			<block v-for="(item, index) in list" :key="index">
				<view class="item" @click="onDetails(item)">
					<image class="file" :src="getImageURL(item.cover)" lazy-load @error="onImageError(index)" />

					<view class="right">
						<view class="title">{{ item.title }}</view>

						<view class="bottom" v-if="item.isVote === 1">
							<view class="num">{{ item.voteNum }}票</view>
							<view class="btn" @click.stop="onVote(item)">
								{{ item.hasVote == 0 ? "投票" : "已投票" }}
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>

		<uEmpty v-if="list.length === 0" />
	</div>
</template>

<script>
	import {
		getInfoList,
		getClassifyList
	} from "@/utils/api.js";
	export default {
		data() {
			return {
				tab_list: [],
				tab_index: 0,
				classifyID: "0", // 分类ID
				page: 1,
				total: 0,
				list: [],
			};
		},
		onLoad() {},
		onShow() {
			const loginStatus = this.$filters.isLogin();
			if (loginStatus == true) {
				if (this.tab_list.length == 0) {
					this.getClassifyList();
				} else {
					this.onRefresh();
				}
			}
		},
		onPullDownRefresh() {
			this.onRefresh();
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.page++;
				this.getData();
			}
		},
		methods: {
			/**
			 * 图片加载失败
			 */
			onImageError(index) {
				this.list[index].cover = "/static/common/default_icon.png";
			},
			/**
			 * 轮播图报错
			 */
			onBannerError(index) {
				this.tab_list[this.tab_index].banner[index].cover = "/static/common/default_icon.png";
			},
			/**
			 * 切换tab
			 */
			onTab(item, index) {
				this.tab_index = index;
				this.classifyID = item.infoClassifyId;
				this.onRefresh();
			},
			/**
			 * 详情
			 */
			onDetails(item) {
				if (this.$filters.isGoToExternalLink(item.isLink, item.content)) {
					uni.navigateTo({
						url: `/pages/entrepreneurship/detail?infoID=${item.infoId}`,
					});
				}
			},
			/**
			 * 投票
			 */
			onVote(item) {
				this.$filters.infoVote(item.infoId, () => {
					this.onRefresh();
				});
			},
			/**
			 * 刷新
			 */
			onRefresh() {
				this.page = 1;
				this.getData();
			},
			/**
			 * 网络请求
			 */
			getData() {
				getInfoList(this.classifyID, this.page).then((res) => {
					this.total = res.data.total;
					const list = res.data.data;
					if (this.page === 1) {
						this.list = list;
					} else {
						this.list = this.list.concat(list);
					}
				});
			},
			/**
			 * 获取分类
			 */
			getClassifyList() {
				getClassifyList(1).then((res) => {
					this.tab_list = res.data;

					if (this.tab_list.length > 0) {
						this.classifyID = this.tab_list[0].infoClassifyId;
						this.onRefresh();
					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #f6f6f6;
	}
	
	.top-head {
		position: sticky;
		left: 0;
		top: 0rpx;
		width: 100%;
		z-index: 10;
		
		.banner {
			width: 100%;
			height: 500rpx;
			overflow: hidden;
			
			swiper, swiper-item {
				width: 100%;
				height: 500rpx;
				overflow: hidden;
			}
			
			.img {
				width: 100%;
				height: 500rpx;
			}
		}
	}
	
	.tab-head {
		width: 100%;
		height: 100rpx;
		background-color: #f7f7f7;
		display: flex;
		flex-wrap: wrap;
		overflow: hidden;

		.tab-item {
			flex: 1;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			color: #333333;
			font-size: 30rpx;
			position: relative;
			z-index: 11;
		}

		.line {
			position: absolute;
			left: 50%;
			bottom: 0;
			width: 34rpx;
			height: 6rpx;
			transform: translateX(-50%);
			background-color: #ea5520;
			z-index: 12;
		}

		.active {
			color: #ea5520;
		}
	}

	.wrap-list {
		width: 100%;
		overflow: hidden;
		background-color: white;
		padding: 0 20rpx;
		box-sizing: border-box;

		.item {
			width: 100%;
			padding: 30rpx 0rpx;
			background-color: white;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #e5e5e5;

			&:last-child {
				border-bottom: none;
			}

			.file {
				width: 230rpx;
				height: 154rpx;
				overflow: hidden;
			}

			.right {
				margin-left: 30rpx;
				flex: 1;
				overflow: hidden;

				.title {
					color: #333333;
					font-size: 30rpx;
					line-height: 44rpx;
				}

				.bottom {
					margin-top: 20rpx;
					width: 100%;
					overflow: hidden;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.num {
						color: #999999;
						font-size: 26rpx;
					}

					.btn {
						width: 132rpx;
						height: 58rpx;
						line-height: 58rpx;
						text-align: center;
						border-radius: 40rpx;
						overflow: hidden;
						background-color: #ea5520;
						color: white;
						font-size: 28rpx;
					}
				}
			}
		}
	}

	view {
		line-height: 1;
	}
</style>